import Hljs from 'highlight.js';
import 'highlight.js/styles/googlecode.css';
import 'highlight.js/styles/monokai-sublime.css';
// import 'highlight.js/styles/lightfair.css'
// import 'highlight.js/styles/a11y-light.css'
import 'highlight.js/styles/panda-syntax-light.css';
import hljs from 'highlight.js/lib/core';
import jsHighlight from 'highlight.js/lib/languages/javascript';

const languages = ['javascript', 'typescript', 'yml', 'bash', 'yaml', 'json', 'sql', 'css', 'js', 'shell', 'php',
  'java', 'c', 'text', 'plain', 'py', 'sass', 'xml', 'html', 'go'];
languages.forEach(e => {
  hljs.registerLanguage(e, jsHighlight);
});
hljs.highlightAll();
let Highlight = {};
Highlight.install = function (Vue, options) {
  Vue.directive('highlight', function (el) {
    let blocks = el.querySelectorAll('pre code');
    blocks.forEach((block) => {
      Hljs.highlightBlock(block);
    });
  });
};
export default Highlight;
